<template>
  <div class="content">
    <div>
      <van-nav-bar title="物料详情" class="nav-bar-style" left-arrow @click-left="onClickLeft">
        <template #title>
          <div class="nav-bar-title-style">物料详情</div>
        </template>
        <template #left>
          <van-icon size="30" name="arrow-left" color="#FFF" />
        </template>
      </van-nav-bar>
    </div>
    <div class="itemOutSide">
      <ul>
        <li class="totoalItemStyle" v-for="(item,index) in materialInfoList" :key="index">
          <div class="left">
            <div class="leftLi">
              <span class="title">批号</span>
              <span class="desc">{{item.batchCode}}</span>
            </div>
            <!-- <div class="leftLi">
              <span class="title">入库时间</span>
              <span
                class="desc"
                v-show="item.inTime"
              >{{$moment(item.inTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
              <span class="desc" v-show="!item.inTime">暂无</span>
            </div> -->
            <div class="leftLi">
              <span class="title">生产日期</span>
              <span
                class="desc"
                v-show="item.productionDate"
              >{{$moment(item.productionDate).format('YYYY-MM-DD HH:mm:ss')}}</span>
              <span class="desc" v-show="!item.productionDate">暂无</span>
            </div>
            <div class="leftLi">
              <span class="title">有效期至</span>
              <span class="desc">{{$moment(item.validUntil).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </div>
            <div class="leftLi">
              <span class="title">剩余数量</span>
              <span class="desc">{{item.stockNumber}}</span>
            </div>
            <div class="leftLi">
              <span class="title">储存位置</span>
              <span class="desc1" v-show="item.storageLocation" v-html="cutout(item.storageLocation)"></span>
              <!-- <span class="desc1" v-show="item.storageLocation">{{item.storageLocation}}</span> -->
              <span class="desc1" v-show="!item.storageLocation">暂无</span>
            </div>
            <!-- <div class="leftLi">
              <span class="title">备注</span>
              <span class="desc" v-show="item.remark">{{item.remark}}</span>
              <span class="desc" v-show="!item.remark">暂无</span>
            </div>-->
            <van-divider :style="{ color: '#A9A9A9', borderColor: '#B0B0B0', padding: '0 5px' }"></van-divider>
          </div>
        </li>
      </ul>
    </div>

    <!-- 暂无数据 -->
    <div v-if="materialInfoList.length == 0" class="noDataCont">
      <div class="imgs">
        <img src="@/assets/img_no-data.png" alt="暂无数据" />
      </div>
      <div class="noDataTitle">暂无数据</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import http from "@/utils/request.js";
import api from "@/utils/api";
import SERVER_RESPONSE from "@/utils/response";
import { List } from "vant";
import { PullRefresh } from "vant";
import { NavBar } from "vant";
import router from "@/router";
import Toast from "@/utils/toast";
import { TreeSelect } from "vant";
import { Overlay } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
import { Picker } from "vant";
import { Dialog } from "vant";
import { Divider } from "vant";

Vue.use(List);
Vue.use(PullRefresh);
Vue.use(NavBar);
Vue.use(TreeSelect);
Vue.use(Overlay);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Picker);
Vue.use(Divider);

export default {
  data() {
    return {
      materialId: "",
      materialInfoList: [],

      isBtnToInstorageDisabled: true,
      isShowSelectStoreLocation: false,
      barCodes: [],

      hasScanBarCodes: [],
      hasScanedCount: 0,

      inStorageInfos: []
    };
  },
  methods: {
    cutout(cellValue) {
      console.log(cellValue)
      if(cellValue){
        return cellValue.replace(/\,/g, "</br>");
      }
    },
    getOutStorageMaterailInfo() {
      let param = { materialId: this.materialId,isShowNull:true };
      http.fetchGet(api.LimsGetStockMaterialQueryAsync,param,"正在加载出库单物料详情").then(response => {
          this.materialInfoList = response.data;
          this.finished = true;
          this.loading = false;
          this.refreshing = false;
          this.count++;
      }).catch(err => {
          console.log(" catch err  is  " + err);
          this.finished = true;
          this.loading = false;
          this.refreshing = false;
          this.count++;
      });
    },
    onClickSelectLeft(index) {
      this.regionActivieId = index;
    },
    onClickSelectRight(data) {
      this.shelfActiveId = data.id;
    },
    onClickLeft() {
      router.push({
        path: "/outStorageDetail" ,
        query: {
          id: this.$route.query.id
        }
      });
    },
    scan() {
      window.AndroidWebView.scan();
    },

    checkBtnToInStorageStatus() {
      let isHasLocation = this.hasSelectLocation();
      let isScanedAllBarCoeds =
        this.hasScanBarCodes.length == this.barCodes.length;
      //没有选择位置 或者没有扫够条码  disableButtonStatus
      this.isBtnToInstorageDisabled = !isHasLocation || !isScanedAllBarCoeds;
    },

    //根据批号查询 物料详情
    searchMaterialDetail() {
      let param = {};
      http
        .fetchGet(api.materialDetail, param)
        .then(response => {
          this.materailInfo.id = response.data.materialId;
          this.materailInfo.materialName = response.data.materialName;
          this.materailInfo.materialCode = response.data.materialCode;
          this.materailInfo.productionDate = response.data.productionDate;
          this.materailInfo.expirationDate = response.data.expirationDate;
          this.materailInfo.barCode = response.data.barCode;
          this.materailInfo.sCondition = response.data.sCondition;
          this.materailInfo.number = response.data.number;

          console.log("id is " + this.materailInfo.materialId);
          console.log("name  is " + this.materailInfo.materialName);
        })
        .catch(err => {
          console.log(" err  is here " + err);
        });
    }
  },
  created() {
    //TODO
    let queryedMaterialId = this.$route.query.materialId;
    if (queryedMaterialId == null || queryedMaterialId == "undefined") {
      this.materialId = window.localStorage.getItem("materialId");
    } else {
      window.localStorage.setItem("materialId", queryedMaterialId);
      this.materialId = queryedMaterialId;
    }
  },

  mounted() {
    if (this.materialId != null) {
      this.getOutStorageMaterailInfo();
    }
  }
};
</script>

<style scoped>
.content {
  background-color: #fff;
}

.storeLeft {
  font-weight: bold;
  font-size: 22px;
}

.storeRight {
  font: bold;
  margin-left: 40px;
  font-weight: bold;
  font-size: 22px;
}

.left {
  width: 100%;
  text-align: left;
}
.btn {
  height: 36px;
  line-height: 36px;
  min-width: 100px;
  border-radius: 50px;
}
.leftLi {
  display: flex;
  width: 95%;
  line-height: 37px;
}
.scanCountLi {
  display: flex;
  flex-direction: row;
  line-height: 37px;
  align-items: flex-start;
  justify-items: flex-start;
  justify-content: flex-start;
}
.scanCountMoreStyle {
  margin-left: 20px;
  margin-top: 6px;
}
.title {
  min-width: 33%;
  color: #999999;
}
.desc {
  padding-left: 20px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333333;
}
.desc1 {
  margin-left: 20px;
}
.van-button--primary {
  background-color: rgba(71, 124, 236, 1);
}
.nar-bar-parent-style {
  display: flex;
  justify-content: space-between;
}
.nav-bar-title-style {
  margin-right: 62px;
  font-size: 22px;
  text-align: center;
  font-family: PingFangSC-Regular;
  color: #fff;
}

.nav-bar-title-right-style {
  font-size: 20px;
  margin-top: 5px;
  font-family: PingFangSC-Regular;
  text-align: center;
  margin-bottom: 11px;
  color: rgba(71, 124, 236, 1);
}
.nav-bar-style {
  /* width: 64px;
  height: 42px; */
  font-size: 30px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(71, 124, 236, 1);
  background: #2e71ff;
}
.toInStorageCountStyle {
  font-size: 22px;
  text-decoration: blink underline;
  margin-left: 20px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.out-detail-style {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.over-flow-style {
  width: 100%;
  height: 1200px;
  background: gray;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0.6;
}
.confirmStyle {
  font-size: 20px;
  align-self: center;
  padding: 10px;
}
.itemOutSide {
  width: 100%;
  background-color: #fff;
}

.totoalItemStyle {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  font-size: 20px;
  align-items: flex-start;
  background-color: #fff;
  margin-top: 20px;
  flex-grow: 0;
  width: 100%;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
}
.pickerToobarStyle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  color: #477cec;
}
.pickerToolbarContent {
  display: flex;
  align-items: center;
}
.pickerToolbarContentButton {
  padding-left: 10px;
  padding-right: 10px;
  align-items: center;
}
.divBtnToInStorageStyle {
  width: 100%;
  height: 100%;
  display: flex;
  margin-bottom: 20px;
  justify-content: center;
  position: fixed;
  bottom: 10px;
  width: 100%;
  height: auto;
  margin: auto;
}
.btnToInStorageStyle {
  margin-top: 30px;
  margin-bottom: 22px;
  width: 92%;
  height: 56px;
  background: rgba(28, 53, 108, 1);
  border-radius: 50px;
  font-size: 22px;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 45px;
  letter-spacing: 1px;
  align-self: flex-end;
}
.nav-bar-style {
  background: #2e71ff;
  color: #fff;
}
/* 暂无数据 */
.noDataTitle {
  color: #666666;
  font-size: 20px;
  margin-top: 10px;
}
.noDataCont {
  height: 274px;
  /* width: 100%; */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -137px;
  transform: translate(-50%);
}
img {
  width: 100%;
  height: 100%;
}
.van-cell {
  padding: 0;
}
</style>
